<template>
	<div class="box">
		<h3>表单查询样例</h3>
		<form @submit.prevent="doQuery(dataRef)" ref="form">
			<div class="form-box" layout="row" layout-wrap>
				<form-interface label="" flex="50">
					<form-item
						type="multiple-search"
						method="get"
						@change="change"
						search-content="name"
						:response-handler="responseHandler"
						:before-send="beforeSend"
						url="/sales/building/directory/selectBuildingListByName"
						v-model="dataRef.list"
						:validate-rule="{ required: true }"
						@load="liveSearchRef = $event"
					/>
				</form-interface>
			</div>
			<div v-for="item in dataRef.list" :key="item.valueCode">{{ item.valueName }}</div>
			<div layout="row" layout-align="center center" class="mt-20">
				<button class="btn btn-primary" type="submit">查询试试</button>
				<button class="btn ml-10" type="reset" @click="restoreLiveSearchFn">重置</button>
			</div>
		</form>
	</div>
	<div class="box mt-20">
		<h2 class="chapter-header">表格展示</h2>
		<table class="table mt-20">
			<thead>
				<tr>
					<th class="text-left">buildName</th>
					<th>buildingArea</th>
					<th>createBy</th>
					<th>createByName</th>
					<th>createTime</th>
					<th>isRelation</th>
					<th>layoutName</th>
					<th>layoutPhoto</th>
					<th>layoutPhotoMin</th>
					<th>layoutStr</th>
					<th>state</th>
					<th>stateStr</th>
					<th class="text-center">towards</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="item in pagingRef.list" :key="item.layoutId">
					<td>{{ item.buildName }}</td>
					<td>{{ item.buildingArea }}</td>
					<td>{{ item.createBy }}</td>
					<td>{{ item.createByName }}</td>
					<td>{{ item.createTime }}</td>
					<td>{{ item.isRelation }}</td>
					<td>{{ item.layoutName }}</td>
					<td>{{ item.layoutPhoto }}</td>
					<td>{{ item.layoutPhotoMin }}</td>
					<td>{{ item.layoutStr }}</td>
					<td>{{ item.state }}</td>
					<td>{{ item.stateStr }}</td>
					<td>
						<span class="attention">{{ item.towards }}</span
						><span class="vertical-line"></span><span class="attention">{{ item.towards }}</span>
					</td>
				</tr>
				<tr v-if="pagingRef.list && !pagingRef.list.length">
					<td colspan="13">未查询到结果</td>
				</tr>
			</tbody>
		</table>
		<async-component type="paging" url="/bdc/layout/queryList.htm" @load="pagingRef = $event" />
	</div>
</template>

<script>
import { reactive, ref } from 'vue'
import { singleThreadWrapFn } from '../../util'

export default {
	setup() {
		const form = ref({})
		const pagingRef = ref({})
		const dataRef = reactive({
			list: [],
			pageSize: 15,
		})

		function change(value) {
			console.log(value)
		}

		// 触发查询
		const doQuery = singleThreadWrapFn(async (data) => {
			await pagingRef.value.query(data)
		})

		function responseHandler(result) {
			result.data.rows = result.data.list.map((item) => {
				return {
					valueCode: item.id,
					valueName: item.name,
					bizid: item.bizid,
				}
			})
			return result
		}

		function beforeSend(param) {
			return param //将改变后的请求参数return  --注意:格式不能发生变化
		}

		const liveSearchRef = ref({})

		const restoreLiveSearchFn = () => {
			liveSearchRef.value.rollback()
		}

		return {
			dataRef,
			pagingRef,
			form,
			change,
			doQuery,
			responseHandler,
			beforeSend,
			restoreLiveSearchFn,
			liveSearchRef,
		}
	},
}
</script>

<style scoped lang="less">
.form-item {
	padding: 10px 15px;

	label {
		display: block;
		width: 100px;
		text-align: right;
	}

	.split {
		padding: 0 5px;
	}
}
</style>
